<template>
	<view :style="{backgroundColor: backgroundColor}">
		<u-navbar :is-back="false" :background="background" :border-bottom="false">
			<view class="slot-wrap" style="color: #fff; font-size: 32rpx;width: 100vw;">
				<view style="display: flex;justify-content: center;width: 100%;">
					<view style="width: 300rpx;">
						<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change"
							:bg-color="backgroundColor" inactive-color="#fff" active-color="#fff"></u-tabs>
					</view>
				</view>
			</view>
		</u-navbar>
		<view
			:style="{background: `url(${images.banner})`, backgroundRepeat: 'no-repeat',backgroundSize: '100vw',width: '100%',height: bannerHight}">
			<!-- <u-image width="100%" src="/static/meituan/banner_meituanwaimai@2x.png" mode="widthFix" ></u-image> -->
		</view>
		<view
			:style="{background:`url(${images.kapian})`, backgroundRepeat: 'no-repeat', backgroundSize: '100vw', width: '100%', height: kapianHeight, marginTop: '-128rpx',zIndex: 1000}">
			<view class="tg_content">
				<view class="ic_class">
					<u-image width="88rpx" :src="images.lingjuan" mode="widthFix" :lazy-load="false">
					</u-image>
					<text>先领券</text>
				</view>
				<view class="ic_class">
					<u-image width="88rpx" :src="images.xiadan" mode="widthFix"></u-image>
					<text>下订单</text>
				</view>
				<view class="ic_class">
					<u-image width="88rpx" :src="images.fanli" mode="widthFix"></u-image>
					<text>拿返利</text>
				</view>
			</view>

			<view style="width: 320rpx;height: 320rpx; margin: 0 auto;margin-top: 100rpx;margin-bottom: 30rpx;">
				<u-image width="320rpx" height="320rpx" :src="images.qrcode"></u-image>
			</view>

			<u-button v-if="current == 0" @click="openMeiTuan('meituan', 'takeaway', 'mini')"
				:custom-style="waimaiButtonStyle" :plain="true" :hair-line="false" shape="circle" hover-class="none">
				<!-- <text style="color: #fff;font-size: 36rpx;letter-spacing:6rpx">领红包点外卖</text> -->
			</u-button>
			<u-button v-if="current == 1" @click="openMeiTuan('meituan', 'optimization', 'mini')"
				:custom-style="waimaiButtonStyle" :plain="true" :hair-line="false" shape="circle" hover-class="none">
				<!-- <text style="color: #fff;font-size: 36rpx;letter-spacing:6rpx">领红包点外卖</text> -->
			</u-button>
			<u-button v-if="current == 2" @click="openMeiTuan('meituan', 'hotel', 'mini')"
				:custom-style="waimaiButtonStyle" :plain="true" :hair-line="false" shape="circle" hover-class="none">
				<!-- <text style="color: #fff;font-size: 36rpx;letter-spacing:6rpx">领红包点外卖</text> -->
			</u-button>
			<u-button v-if="current == 0" @click="openMeiTuan('meituan', 'optimization', 'mini')"
				:custom-style="youxuanButtonStyle" :plain="true" :hair-line="false" shape="circle" hover-class="none">
				<!-- <text style="color: #fff;font-size: 36rpx;letter-spacing:6rpx">美团优选红包</text> -->
			</u-button>
		</view>
		<view v-if="current == 0"
			style="display: flex;flex-direction: column;width: 80%;margin: 0 auto;padding-bottom: 60rpx;">
			<text class="zy_text" style="font-size: 30rpx;">返利注意事项：</text>
			<text class="zy_text">1.无论美团新老用户，外卖红包每个手机号每天均可领取一次，红包金额随机发放</text>
			<text class="zy_text">2.美团外卖，必须使用带【专享】标记的优惠券才有返利</text>
			<text class="zy_text">3.领券后在红包有效期内下单均有返利</text>
			<text class="zy_text">4.美团绑定的手机号，需与领券登录的手机号一致</text>
		</view>
		<view v-if="current != 0"
			style="display: flex;flex-direction: column;width: 80%;margin: 0 auto;padding-bottom: 60rpx;">
			<text class="zy_text" style="font-size: 30rpx;">返利注意事项：</text>
			<text class="zy_text">1.无论美团新老用户，外卖红包每个手机号每天均可领取一次，红包金额随机发放</text>
			<text class="zy_text">2.领券后在红包有效期内下单均有返利</text>
			<text class="zy_text">3.美团绑定的手机号，需与领券登录的手机号一致</text>
		</view>
	</view>
</template>

<script>
	import imagesUrl from '../../common/images.js'
	export default {
		data() {
			return {
				tabsList: [{
					name: '外卖'
				}, {
					name: '优选'
				}, {
					name: '酒店'
				}],
				current: 0,
				background: {
					// backgroundImage: 'linear-gradient(to left, rgba(249, 187, 52, 1) , #F9BB34)'
				},
				waimaiButtonStyle: {
					width: "560rpx",
					height: "108rpx",
					marginTop: '20rpx'
					// background: `url( ${imagesUrl.waimaiButton} ) no-repeat`,
					// backgroundSize: "580rpx"
				},
				youxuanButtonStyle: {
					width: "560rpx",
					height: "108rpx",
					// background: `url( ${imagesUrl.youxuanButton} ) no-repeat`,
					// backgroundSize: "580rpx",
					marginTop: "20rpx"
				},
				waimaiLink: null,
				images: {},
				backgroundColor: "#F9BB34",
				kapianHeight: '1010rpx',
				bannerHight: '440rpx',
				share_key: null
			}
		},
		onLoad({
			share_key
		}) {
			this.images = imagesUrl.mt.waimai
			this.waimaiButtonStyle.background = "url(" + imagesUrl.mt.waimai.hongbao + ") no-repeat"
			this.waimaiButtonStyle.backgroundSize = "580rpx"
			this.youxuanButtonStyle.background = "url(" + imagesUrl.mt.waimai.youxuan + ") no-repeat"
			this.youxuanButtonStyle.backgroundSize = "580rpx"
			this.background.backgroundImage = 'linear-gradient(to left, rgba(249, 187, 52, 1) , #F9BB34)'
			this.backgroundColor = "#F9BB34"
			this.kapianHeight = '1010rpx'
			this.bannerHight = '440rpx'

			let that = this;
			let user = uni.getStorageSync('user_info')
			if(user){
				user = JSON.parse(user)
				that.share_key = user.share_key
			}else{
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.$u.api.wechatLogin({
							code: loginRes.code,
							share_key
						}).then(res => {
							that.token = res.token
							that.share_key = res.share_key
						})
					}
				});
			}
		},
		methods: {
			async openMeiTuan(type, child_type, redirect_type) {
				let that = this;
				let user = uni.getStorageSync('user')
				let appId = 'wxde8ac0a21135c07d'

				if (child_type == 'takeaway') {
					appId = 'wxde8ac0a21135c07d';
				}

				let generateLink = await that.$u.api.getGenerateLink({
					type,
					child_type,
					redirect_type
				})

				uni.navigateToMiniProgram({
					appId: generateLink.appid,
					path: generateLink.url,
					success(res) {
						// 打开成功
					},
					fail(err) {
						console.log(err)
					}
				})

				uni.requestSubscribeMessage({
					// tmplIds: ['pU54TKTQvbFU6Vt-YaQTrliA7sWm_8XTUDD0C1dv9rc',
					// 	'qKTMfwQ4IcOZ047ZMgpz2mLF9Z1tpE41gz0EDPRjURk',
					// 	'WjE3DW482GnxzLk8faokD8-EulBqAX2_S1EXkmno5M8'
					// ],
					success(res) {
						console.log(res)
					}
				})
			},
			change(index) {
				this.current = index;
				if (index == 0) {
					this.images = imagesUrl.mt.waimai
					this.waimaiButtonStyle.background = "url(" + imagesUrl.mt.waimai.hongbao + ") no-repeat"
					this.waimaiButtonStyle.backgroundSize = "580rpx"
					this.youxuanButtonStyle.background = "url(" + imagesUrl.mt.waimai.youxuan + ") no-repeat"
					this.youxuanButtonStyle.backgroundSize = "580rpx"
					this.background.backgroundImage = 'linear-gradient(to left, rgba(249, 187, 52, 1) , #F9BB34)'
					this.backgroundColor = "#F9BB34"
					this.kapianHeight = '1010rpx'
					this.bannerHight = '440rpx'
				} else if (index == 1) {
					this.images = imagesUrl.mt.youxuan
					this.waimaiButtonStyle.background = "url(" + imagesUrl.mt.youxuan.hongbao + ") no-repeat"
					this.waimaiButtonStyle.backgroundSize = "580rpx"
					this.background.backgroundImage = 'linear-gradient(to left, rgba(247, 92, 45, 1) , #F75C2D)'
					this.backgroundColor = "#F75C2D"
					this.kapianHeight = '908rpx'
					this.bannerHight = '480rpx'
				} else if (index == 2) {
					this.images = imagesUrl.mt.jiudian
					this.waimaiButtonStyle.background = "url(" + imagesUrl.mt.jiudian.hongbao + ") no-repeat"
					this.waimaiButtonStyle.backgroundSize = "580rpx"
					this.background.backgroundImage = 'linear-gradient(to left, rgba(250, 17, 82, 1) , #FA1152)'
					this.backgroundColor = "#FA1152"
					this.kapianHeight = '908rpx'
					this.bannerHight = '490rpx'
				}
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: "餐前福利！外卖红包天天领，最高可得66元",
				path: '/pages/meituan/meituan?share_key=' + this.share_key,
				imageUrl: '../../static/share.png'
			}
		}
	}
</script>

<style>
	body {
		/* background-color: #F9BB34; */
	}

	,
	.tg_content {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 80%;
		margin: 0 auto;
		padding-top: 80rpx;
	}

	,
	.ic_class {
		display: flex;
		flex-direction: column;
	}

	,
	.zy_text {
		color: #fff;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	,
	.waimaiBanner {
		background-repeat: no-repeat;
		background-size: 100vw;
		width: 100%;
		height: 440rpx;
	}
</style>
